<template>
  <a-modal class="staffInfo_modal" v-model="visible" :title="title" :confirmLoading="submitLoading" width="1000px"
    ok-text="确认" cancel-text="取消" @ok="addFormSubmit">
    <a-form layout="inline" :form="events_form" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
      <a-page-header :title="moduleName">
        <div v-if="infoList.length > 0">
          <span v-for="(item, index) in infoList" :key="item.bid">
            <a-form-item :label="item.name" v-if="item.fieldType == 2" :style="{ 'width': item.isAlone == 1 ? '100%' : '50%' }">
              <a-select v-model="item.value">
                <a-select-option :value="info" v-for="info in item.selectContent" :key="info">
                  {{ info }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="item.name" v-else-if="item.fieldType == 3"
              :style="{ 'width': item.isAlone == 1 ? '100%' : '50%' }">
              <a-select v-model="item.value" mode="multiple">
                <a-select-option :value="info" v-for="info in item.selectContent" :key="info">
                  {{ info }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item :label="item.name" v-else-if="item.fieldType == 4"
              :style="{ 'width': item.isAlone == 1 ? '100%' : '50%' }">
              <div v-if="item.content == 'yyyy-MM'">
                <a-month-picker valueFormat="YYYY-MM" v-model="item.value" placeholder="选择月份"></a-month-picker>
              </div>
              <div v-else-if="item.content == 'yyyy-MM-dd'">
                <a-date-picker valueFormat="YYYY-MM-DD" v-model="item.value" placeholder="选择日期" />
              </div>
              <div v-else-if="item.content == 'yyyy-MM-dd HH'">
                <a-date-picker valueFormat="YYYY-MM-DD HH" :show-time="{ format: 'HH' }" v-model="item.value" placeholder="选择日期" />
              </div>
              <div v-else-if="item.content == 'yyyy-MM-dd HH:mm'">
                <a-date-picker valueFormat="YYYY-MM-DD HH:mm" :show-time="{ format: 'HH:mm' }" v-model="item.value" placeholder="选择日期" />
              </div>
              <div v-else-if="item.content == 'yyyy-MM-dd HH:mm:ss'">
                <a-date-picker valueFormat="YYYY-MM-DD HH:mm:ss" :show-time="{ format: 'HH:mm:ss' }" v-model="item.value" placeholder="选择日期" />
              </div>
            </a-form-item>
            <a-form-item :label="item.name" v-else-if="item.fieldType == 6"
              :style="{ 'width': item.isAlone == 1 ? '100%' : '50%' }">
              <div v-show="item.value">
                <img :src="item.value" style="width:180px;height:120px;" />
                <div class="uploadImg" v-show="false" v-viewer="{ movable: false }">
                  <img :src="item.value" style="width:180px;height:120px;" />
                </div>
                <div style="padding:5px;display:flex">
                  <a href="#" style="padding-right:55px" @click="showDo('uploadImg')">查看大图</a>
                  <a href="#" type="link" @click="uploadImg(index)">重新上传</a>
                </div>
              </div>
              <div v-show="!item.value">
                <a head="#" @click="uploadImg(index)">上传图片</a>
                <input type="file" :ref="'uploadImgs' + index" @change="(e) => { return handleImgChange(e, item.bid) }"
                  style="display: none;" />
              </div>
            </a-form-item>
            <a-form-item :label="item.name" v-else-if="item.fieldType == 7"
              :style="{ 'width': item.isAlone == 1 ? '100%' : '50%' }">
              <div>
                <a-button @click="uploadFile(index)" type="primary">上传文件</a-button>
                <input type="file" :ref="'uploadFiles' + index" @change="(e) => { return handleFileChange(e, item.bid) }"
                  style="display: none;" />
              </div>
              <div>
                <a :href="item.value" target="_blank">{{ strSlice(item.value) }}</a>
              </div>
            </a-form-item>
            <a-form-item :label="item.name" v-else :style="{ 'width': item.isAlone == 1 ? '100%' : '50%' }">
              <a-input :placeholder="'请输入' + item.name" v-model="item.value" />
            </a-form-item>
          </span>
        </div>
      </a-page-header>
    </a-form>
  </a-modal>
</template>

<script>
import {
  queryStaffModuleInfo,
  savaModuleInfo
} from "@/api/human/config"
import {
  uploadNewFile
} from '@/api/manage/base'
export default {
  name: 'AddInfo',
  data() {
    return {
      title: "",
      visible: false,
      configType: "1",
      configTitle: "用于姓名、公司名称等文字信息的输入",
      contentDate: "", // 日期格式内容
      submitLoading: false,

      id: "",
      moduleId: "",
      moduleName: "",
      staffId: "",
      infoList: [],
      uploadImgs: [],
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {

  },
  beforeUpdate() {
    // this.uploadImgs = [];
  },
  methods: {
    // 打开编辑弹窗 
    async add(row, staffId) {
      this.title = '个人信息编辑';
      this.id = row.id;
      this.moduleId = row.moduleId;
      this.moduleName = row.name;
      this.staffId = staffId;
      this.visible = true;
      const { code, data } = await queryStaffModuleInfo({
        staffId: this.staffId,
        moduleId: this.moduleId
      });
      if (code == 1) {
        // 处理返回空字符显示状态
        data.children.forEach(item => {
          if (item.fieldType == 3) {
            if (item.value == "") {
              item.value = []
            } else {
              item.value = item.value.split(",")
            }
          }
        })
        this.infoList = data.children
      }
    },
    // 上传图片
    uploadImg(i) {
      let refInfo = eval("this.$refs.uploadImgs" + i)[0]
      refInfo.click();
    },
    async handleImgChange(e, bid) {
      e.preventDefault();
      let _this = this;
      let file = e.target.files[0];
      if (file === undefined) {
        e.target.value = "";
        return;
      }
      if (file.type.indexOf('image') === -1) {
        _this.$message.error("非法图片格式");
        e.target.value = "";
        return;
      }
      if (!(file.size / 1024 / 1024 < 1)) {
        _this.$message.error('图片大小不能超过 1MB!')
        e.target.value = "";
        return;
      }
      var params = new FormData();
      params.append("file", file);
      params.append("dirName", '人资关系');
      let {
        code,
        data
      } = await uploadNewFile(params);
      if (code === '1') {
        _this.infoList.forEach(item => {
          if (item.bid == bid) {
            item.value = data
          }
        })
        e.target.value = "";
      }
    },
    // 查看大图
    showDo(el) {
      const viewer = this.$el.querySelector('.' + el).$viewer
      viewer.show()
    },
    // 上传文件
    uploadFile(i) {
      let refInfo = eval("this.$refs.uploadFiles" + i)[0]
      refInfo.click();
    },
    async handleFileChange(e, bid) {
      e.preventDefault();
      let _this = this;
      let file = e.target.files[0];
      if (file === undefined) {
        e.target.value = "";
        return;
      }
      var params = new FormData();
      params.append("file", file);
      params.append("dirName", '人资关系');
      let {
        code,
        data
      } = await uploadNewFile(params);
      if (code === '1') {
        _this.infoList.forEach(item => {
          if (item.bid == bid) {
            item.value = data
          }
        })
        e.target.value = "";
      }
    },
    strSlice(str) {
      const spliceLength = str.lastIndexOf("/");
      return str.slice(spliceLength + 1);
    },
    // 提交
    async addFormSubmit() {
      let params = {
        id: this.id,
        moduleId: this.moduleId,
        staffId: this.staffId,
        content: {}
      }, isSubmit = true;
      // 处理返回空字符显示状态
      this.infoList.forEach(item => {
        if (item.fieldType == 3) {
          if (typeof (item.value) !== "string") {
            item.value = item.value.join(",")
          }
        }
        if (item.value == "" || item.value == null) {
          isSubmit = false;
          this.$message.warning('请输入|选择 ' + item.name);
        }
        params.content = {
          ...params.content,
          [item.bid]: item.value
        }
      })
      if (isSubmit) {
        params.content = JSON.stringify(params.content);
        const { code } = await savaModuleInfo(params);
        if (code == 1) {
          this.visible = false;
          this.$message.success('操作成功');
          this.$emit('on-ok')
        }
      }
    }
  }
}
</script>
<style lang="less">
.staffInfo_modal {

  .ant-page-header-heading-title {
    font-size: 18px;
  }

  .ant-form-item {
    width: 50%;
    margin-right: 0;
  }
}</style>
